<template>
  <div class="navigation-bar">
    <div class="brief-title">
      <span>导航栏</span>
    </div>
        <div v-if="menu" class="boxs">
          <div class="box"
               v-for="(item, index) in menu"
               :key="index"
               :class="item.code"
          >
            <div class="nav-title-group">
              <div class="nav-line"></div>
              <div class="nav-title">{{ item.name }}</div>
            </div>
            <div class="nav-container">
              <div
                v-for="(_item, _index) in item.children"
                :key="_index"
                class="nav-wrapper"
              >
                <div
                  v-for="(item, index) in _item.children"
                  :key="index"
                  :class="item.noMenu ? 'nav-item active' : 'nav-item'"
                  @click="item && item.path ? toLink(item.path) : ''"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
    <div v-else>
      <div
        v-for="(item, index) in navbars"
        :key="index"
        :class="item.class"
      >
        <div class="nav-title-group">
          <div class="nav-line"></div>
          <div class="nav-title">{{ item.title }}</div>
        </div>
        <div class="nav-container">
          <div
            v-for="(_item, _index) in item.navs"
            :key="_index"
            class="nav-wrapper"
          >
            <div
              v-for="(item, index) in _item"
              :key="index"
              :class="item.noMenu ? 'nav-item active' : 'nav-item'"
              @click="item && item.url ? toLink(item.path) : ''"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
export default {

  data() {
    return {
      isMenu: false,
      navbars: [
        {
          title: "信息查询",
          class: "",
          navs: [
            [
              {name: "教员信息", isActive: false},
              {name: "空闲场地", isActive: false},
            ],
            [
              {name: "课程考核成绩", isActive: false},
              {name: "课程考核成绩分布", isActive: false},
            ],
            [
              {name: "综合评教结果查询", isActive: false},

            ],

            [],
          ],
        },

        {
          title: "教学计划",
          class: "yellow",
          navs: [
            [
              {
                name: "教学任务和教材信息审核",
                isActive: true,
                url: "/teacher/assessmentPlan",
              },
            ],
            [
              {name: "排课", isActive: true, url: "/teacher/arrangeTest",},

            ],
            [],
          ],
        },
        {
          title: "课程考核与评价",
          class: "red",
          navs: [
            [
              {
                name: "课程考核实施计划",
                isActive: true,

              },
              {
                name: "考试安排",
                isActive: true,

              },
            ],
            [
              {name: "试卷命题和审批", isActive: false},
              {name: "试卷材料打印", isActive: false},
            ],
            [
              {name: "试题库管理", isActive: false},
              {name: "试卷库管理", isActive: false},
            ],
            [
              {name: "课程成绩录入打印", isActive: false},
              {name: "专项督导信息填报", isActive: false},
            ],
            [],
          ],
        },
        {
          title: "教学课题",
          class: "green",
          navs: [
            [
              {
                name: "课题申报",
                isActive: true,
                url: "/teacher/teachingPlan/infoCheck",
              },

            ],
            [],
          ],
        },

      ],
    };
  },
  computed: {
    ...mapGetters(["menu"]),
  },//计算属性
  methods: {
    toLink(url) {
      if(url!=='/'){
        this.$router.push(url);
      }

    }
  },
};
</script>

<style lang="less" scoped>
@import "../../../styles/home";

.main-container .right-container .block-container .navigation-bar {
  width: 389px;
  height: 805px;
  background: #ffffff;
  box-shadow: 1px 2px 6px rgb(138 138 138 / 16%);
  border-radius: 9px;
  padding-top: 20px;
}

.main-container {
  .left-container {
    .user-info {


      div {
        line-height: 35px;
      }

    }
  }

  .right-container {
    .common-functions {
      ul {
        li {
          width: 326px;
        }
      }
    }

    .block-container {
      .navigation-bar {
        > div {
          &:nth-child(2) {
            margin-top: 10px;
          }
        }

        .nav-title-group {
          margin-top: 0;
        }

        .nav-container {
          padding: 10px 33px 0;

          .nav-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 12px;
            width: 100%;

            .nav-item {
              font-size: 18px;
              color: #666666;
            }

            .active {
              color: #104e98;
              cursor: pointer;
            }
          }
        }

        .yellow {
          .nav-line {
            border: 1px solid #f5c33a;
          }

          .nav-title {
            background: #fff6ef;
            border: 1px solid #f3b815;
            color: #f3b815;
          }
        }

        .grep {
          .nav-line {
            border: 1px solid #999999;
          }

          .nav-title {
            background: #dcdcdc;
            border: 1px solid #666666;
            color: #666666;
          }
        }

        .red {
          .nav-line {
            border: 1px solid #fd3819;
          }

          .nav-title {
            background: #ffefef;
            border: 1px solid #ff3819;
            color: #ff3819;
          }
        }

        .purple {
          .nav-line {
            border: 1px solid #5230e9;
          }

          .nav-title {
            background: #efebff;
            border: 1px solid #5230e9;
            color: #5230e9;
          }
        }

        .green {
          .nav-line {
            border: 1px solid #22c86c;
          }

          .nav-title {
            background: #f1fff8;
            border: 1px solid #02c86c;
            color: #02c86c;
          }
        }
      }
    }
  }
}
</style>
